<template>
  <!-- <div> -->
  <el-card>
    <div slot="header" class="clearfix">
      <span>电影列表</span>
    </div>
    <el-table
      :data="cityData"
      border
      style="width: 100%"
      v-loading="loading"
      :header-cell-style="{background:'#F3F4F7',color:'#555',fontSize:'16px'}"
    >
      <el-table-column fixed prop="poster" label="海报" width align="center">
        <template slot-scope="scope">
          <el-avatar shape="square" :src="scope.row.poster" :size="100"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="电影名称" width align="center"></el-table-column>
      <el-table-column prop="category" label="电影类型" width align="center"></el-table-column>
      <el-table-column prop="director" label="导演" width align="center"></el-table-column>
      <el-table-column prop="language" label="语言" width align="center"></el-table-column>
      <el-table-column prop="nation" label="产地" width align="center"></el-table-column>
      <el-table-column prop="premiereAt" label="上映时间" width align="center" :formatter="date"></el-table-column>
      <el-table-column prop="isSale" label="是否在售" width :formatter="isSale" align="center"></el-table-column>
      <!-- <el-table-column prop="isHot" label="热门" width :formatter="formHot" align="center"></el-table-column> -->
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" circle @click="handleClick(scope)"></el-button>
          <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope)"></el-button>
          <!-- <router-link :to="`/city/edit/${scope.row.cityId}`">编辑</router-link> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pages">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="changePage"
        :hide-on-single-page="value"
      ></el-pagination>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      fits: ["fill", "contain", "cover", "none", "scale-down"],
      cityData: [],
      total: 0,
      pageNum: 1,
      index: 0,
      loading: false,
      value: true,
      arr: []
    };
  },

  methods: {
    date(row, c, cel, b) {
      return this.formTtime(cel);
    },
    //时间戳
    formTtime(time) {
      let date = new Date(time);
      let day = date.getDate();
      let month = date.getMonth() + 1;
      let year = date.getFullYear();
      if (isNaN(day)) {
        return "未填写时间";
      } else {
        return `${year}年${month}月${day}日`;
      }
    },
    //编辑的方法
    edit(scope) {
      let filmId = scope.row.filmId;
      let premiereAt = scope.row.premiereAt;
      console.log("filmId", filmId);
      this.$router.push(`/film/edit/${filmId}`);
      // this.$router.push(`/film/edit`);
      console.log("111", scope);
    },
    //表格的操作方法
    handleClick(scope) {
      this.$confirm(`您将永久删除电影《${scope.row.name}》,是否继续?`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: `删除《${scope.row.name}》成功!`
          });
          const data = {
            filmId: scope.row.filmId
          };
          const url = "/film/delById";
          this.$axios.post(url, data).then(res => {});

          this.cityData.splice(scope.$index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //分页方法
    changePage(pageNum) {
      // console.log("current-page",pageNum)
      this.getFilmList(pageNum);
    },

    // 获取数据的方法
    getFilmList(pageNum) {
      const url = "/film/getList?pageNum=" + pageNum;
      this.loading = true;
      this.$axios
        .get(url)
        .then(res => {
          this.total = res.total;
          this.loading = false;
          console.log("电影列表数据：", res.films);
          this.cityData = res.films;
          console.log(this.cityData);
        })
        .catch(err => {
          console.log("err", err);
          this.loading = false;
        });
    },
    isSale(row, column, cellValue, index) {
      this.index = index;
      return cellValue ? "是" : "否";
    }
  },
 
  created() {
    this.getFilmList();
  }
};
</script>
<style lang="less" scoped>
.clearfix {
  font-size: 22px;
  // font-weight: 900;
}
.pages {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.el-button.is-circle {
  border-radius: 50%;
  padding: 8px;
}
</style>